<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吃啥嘞</title>
	</head>
	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			background-image: url(./bg.jpg);
			text-align: center;
			height: 100%;
			overflow: hidden;
		}

		.container {
			margin-right: auto;
			margin-left: auto;
			width: auto;
		}
		
		@media all and (orientation : portrait) {
			.container {
				position: relative;
				top: 40%;
				transform: translateY(-40%);
			}
			.title {
				font-size: 4rem;
			}
			.label {
				font-size: 2rem;
			}
			#start {
				width: 332px !important;
				height: 127px !important; 
				background-size: 1000px auto !important;
				font-size: 2.5rem !important;
				line-height: 22px !important;
				margin-top: 29% !important;
			}
		
		}

		.general {
			text-align: center;
		}

		.title {
			margin-top: 10%;
		}

		.label {
			margin-top: 1%;
		}

		#start:hover {
			background-position: 0 50%;
		}

		#start {
			width: 194px;
			height: 73px;
			background-image: url(./btn2x.png);
			-webkit-background-size: 582px auto;
			background-size: 582px auto;
			background-color: rgba(255, 0, 0, 0);
			border: none 0;
			outline: none;
			font-size: 18px;
			color: #fff;
			text-shadow: #9e9c9c 0 1px 0;
			cursor: pointer;
			margin-top: 3%;
		}
		
		.temp{
			position: absolute;
			z-index: 999;
			color: #777;
		}
	</style>
	<body>
		<div class="container">
			<h1 class="general title">李老板一会吃<b id="what">什么</b>？</h1>
			<p class="general label"></p>
			<input type="button" value="开始" id="start">
		</div>
	</body>
</html>
<script src="./jquery-2.1.0.min.js"></script>
<script type="text/javascript">
	var MOFUN = window.MOFUN || {};

	MOFUN.random = function(max, min) {
		max = max || 100;
		min = min || 0;
		return Math.ceil(Math.random() * (max - min) + min);
	}

	MOFUN.remove = function(ele) {
		ele && ele.parentNode.removeChild(ele);
	};

	$(function() {
		var running = 0,
			what = $("#what"),
			btn = $("#start"),
			book = [
				["早上",
					"汤饭 肉夹馍 卤肉饭 小火锅 汉堡"
				],
				["中午",
					// "盖浇饭 砂锅 大排档 米线 满汉全席 西餐 麻辣烫 自助餐 炒面 快餐 水果 西北风 馄饨 火锅 烧烤 泡面 速冻水饺 日本料理 涮羊肉 味千拉面 肯德基 面包 扬州炒饭 自助餐 茶餐厅 海底捞 咖啡 比萨 麦当劳 兰州拉面 沙县小吃 烤鱼 海鲜 铁板烧 韩国料理 粥 快餐 萨莉亚 桂林米粉 东南亚菜 甜点 农家菜 川菜 粤菜 湘菜 本帮菜 竹笋烤肉"
					"汤饭 肉夹馍 卤肉饭 小火锅 汉堡"
				],
				["晚上",
					"汤饭 肉夹馍 卤肉饭 小火锅 汉堡"
				]
				
				
			],
			list = book[1][1];
			times = 0,
			timer = 0;

		btn.val("开始").removeAttr("disabled").click(function() {
			var l = list.replace(/ +/g, " ").replace(/^ | $/g, "").split(" ");
			if (l.length == 1 && l[0] != "") return alert("选项太少了哦");
			if (l.length == 1) return alert("是空的哦");
			if (!running) {
				times++;
				if (times == 3) {
					btn.val("继续");
					return false;
				}
				$(this).val("停止");
				timer = setInterval(function() {
					var r = MOFUN.random(l.length),
						food = l[r - 1],
						rTop = MOFUN.random($(document).height()),
						rLeft = MOFUN.random($(document).width() - 50),
						rSize = MOFUN.random(37, 14);
					what.html(food);
					$("<span class='temp'>" + food + "</span>").css({
						"display": "none",
						"top": rTop,
						"left": rLeft,
						"color": "rgba(0,0,0,." + Math.random() + ")",
						"fontSize": rSize + "px"
					}).appendTo("body").fadeIn("slow", function() {
						$(this).fadeOut("slow", function() {
							$(this).remove();
						});
					});
				}, 60);
				running = 1;
				$("#shareto").fadeOut(function() {
					$(this).remove()
				});
			} else {
				btn.val("不行，换一个");
				clearInterval(timer);
				running = 0;
			};
		});

		document.onkeydown = function(e) {
			e = e || window.event;
			if (e.keyCode == 32) $("#start").trigger("click");
		};
	});
	
	window.onresize = function() {
		location.reload();
	}
</script>
